// var(--el-color-primary): #409eff;
// var(--el-color-primary-light-5): #a0cfff;
// var(--el-color-primary)

// 全局灰色，特殊日期用
// html {
//     filter: grayscale(100%);
//     -webkit-filter: grayscale(100%);
//     -moz-filter: grayscale(100%);
//     -ms-filter: grayscale(100%);
//     -o-filter: grayscale(100%);
//     filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
//     filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
// }


/*
* 
*  全局样式导航
*  1. 菜单样式
*  2. 顶部导航样式
*  3. 顶部面包屑样式
*  4. 实体列表相关样式
*     4.1 更多按钮容器样式
*     4.2 实体详情样式
*     4.3 高级搜索样式
*  5. 弹框样式（ml-dialog）
*  6. 仪表盘样式
*/


/**
* 
*  菜单样式  -------------------- begin --------------------
* 
*/

// 菜单样式变量
$--nav-menu-bg-color: #fff;
$--nav-menu-text-color: rgb(48, 49, 51);

// 左侧菜单
.adminui-side-top {
	background-color: #{$--nav-menu-bg-color};
	h2 {
		color: #{$--nav-menu-text-color};
	}
}

.nav-menu-scrollbar {
	:deep(.el-scrollbar__view) {
		height: 100% !important;
	}
	.main-nav-menu {
		--el-menu-bg-color: #{$--nav-menu-bg-color};
		--el-menu-text-color: #{$--nav-menu-text-color};
		--el-menu-active-color: var(--el-color-primary) !important;
		height: 100%;
	}
}

.adminui-side-bottom {
	background-color: #{$--nav-menu-bg-color};
	color: #{$--nav-menu-text-color};
}

.nav-popover-box {
    background-color: #{$--nav-menu-bg-color};
    color: #{$--nav-menu-text-color};
    &.is-light, &.is-light>.el-popper__arrow:before{
        background-color: #{$--nav-menu-bg-color};
        color: #{$--nav-menu-text-color};
    }
    .add-box {
        .el-button {
            background-color: #{$--nav-menu-bg-color};
            color: #{$--nav-menu-text-color};
        }
    }
}
/**
* 
*  菜单样式  -------------------- end --------------------
* 
*/


/**
* 
*  顶部导航样式  -------------------- end --------------------
* 
*/
$--top-nav-bg-color: var(--el-color-primary);
$--top-nav-text-color: #ffffff;
.adminui-header {
    background: #{$--top-nav-bg-color};
    color: #{$--top-nav-text-color};
    .scrollbar-demo-item {
        color: #{$--top-nav-text-color} !important;
    }
    .approval-center .approval-icon-span{
        color: #{$--top-nav-text-color} !important;
    }
    .user-bar .user-avatar {
        color: #{$--top-nav-text-color} !important;
        label {
            color: #{$--top-nav-text-color} !important;
        }
    }
}


/**
* 
*  顶部面包屑样式  -------------------- begin --------------------
* 
*/
// 顶部导航背景颜色
$--topBar-bg-color: #fff;
// 顶部导航文字颜色
$--topBar-text-color: #606266;

.adminui-topbar {
	height: 50px;
	border-bottom: 1px solid #ebeef5;
	background: #{$--topBar-bg-color};
	box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
	display: flex;
	justify-content: space-between;
    .left-panel {
        display: flex;
        align-items: center;
        .el-breadcrumb__inner,
        .el-breadcrumb__separator {
            color: #{$--topBar-text-color};
        }
    }
    .right-panel {
        display: flex;
        align-items: center;
    }
}

// tag部分

// tag背景颜色
$--tag-bg-color: #fff;
// tag边框颜色
$--tag-border-color: #e6e6e6;
// tag文字颜色
$--tag-text-color: #999;

.adminui-tags {
	height: 35px;
	background: #{$--tag-bg-color};
	border-bottom: 1px solid #{$--tag-border-color};
    ul {
        display: flex;
        overflow: hidden;
        list-style: none;
        li {
            cursor: pointer;
            float: left;
            height: 34px;
            line-height: 34px;
            position: relative;
            flex-shrink: 0;
            &::after {
                content: " ";
                width: 1px;
                height: 100%;
                position: absolute;
                right: 0px;
                background-image: linear-gradient(#{$--tag-bg-color}, #{$--tag-border-color});
            }
            a {
                display: inline-block;
                padding: 0 10px;
                width: 100%;
                height: 100%;
                color: #{$--tag-text-color};
                text-decoration: none;
                display: flex;
                align-items: center;
            }
            i {
                margin-left: 10px;
                border-radius: 3px;
                width: 18px;
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                &:hover {
                    background: rgba(0, 0, 0, 0.2);
                    color: #fff;
                }
            }
            &:hover {
                background-color: var(--el-color-primary-light-5);
                & > a {
                    color: #fff;
                }
            }
            &.active {
                background: var(--el-color-primary);
                & > a {
                    color: #fff;
                }
            }
            &.sortable-ghost {
                opacity: 0;
            }
           
        }
    }
}





/**
* 
*  顶部面包屑样式  -------------------- end --------------------
* 
*/


/**
* 
*  实体列表相关样式  -------------------- begin --------------------
* 
*/

// 实体列表容器背景颜色
$--table-bg-color: #f6f8f9;
// 实体列表容器顶部搜索容器背景颜色
$--table-search-box-bg-color: #fff;
// 实体列表容器底部分页块背景颜色
$--table-footer-bg-color: #fff;
// 实体列表分页块文本颜色
$--table-footer-text-color: var(--el-text-color-regular);

// 实体列表表格Th背景颜色
$--table-header-bg-color: var(--el-table-header-bg-color);;
// 实体列表表格Th文字颜色
$--table-header-text-color: var(--el-table-header-text-color);
// 实体列表表格Td背景颜色
$--table-td-bg-color: var(--el-table-bg-color);
// 实体列表表格Td文字颜色 -- 继承父级 （如果改了这个，那么列表-更多-其他列表设置-自定义行样式属性设置文本颜色将不生效）
$--table-td-text-color: inherit;
// 实体列表表格Tr背景颜色
$--table-tr-bg-color: var(--el-table-tr-bg-color);
// 实体列表表格斑马纹背景颜色
$--table-striped-bg-color: var(--el-fill-color-lighter);

// 实体列表容器
.adminui-main {
	overflow: auto;
	flex: 1;
	background: #{$--table-bg-color};
	// 实体列表顶部搜索容器
	.table-search-box {
		background: #{$--table-search-box-bg-color};
	}
    .table-div {
        .el-table {
            th.el-table__cell {
                background: #{$--table-header-bg-color};
                color: #{$--table-header-text-color};
            }
            td.el-table__cell {
                background: #{$--table-td-bg-color};
                color: #{$--table-td-text-color};
            }
            tr {
                background: #{$--table-tr-bg-color};
                &.el-table__row--striped {
                    background: #{$--table-striped-bg-color};
                }
            }
        }
        
    }
	// 实体列表分页块
	.table-footer {
		background: #{$--table-footer-bg-color};
        
       
        .el-pagination {
            .el-pagination__sizes, 
            .el-pagination__total,
            .el-pagination__jump,
            .el-input__inner,
            .el-select__placeholder,
            .el-select__caret
            {
                color: #{$--table-footer-text-color};
            }
            .el-select__wrapper,
            .el-input__wrapper
            {
                background: #{$--table-footer-bg-color};
                --el-border-color: #{$--table-footer-bg-color};
            }
            button {
                background: #{$--table-footer-bg-color};
                color: #{$--table-footer-text-color};
            }
            .el-pager li {
                background: #{$--table-footer-bg-color};
            }
        }
	}
}

/* 
* 
*  更多按钮容器样式  -------------------- 3.1 --------------------
* 
*/

// 更多按钮容器背景颜色
$--table-setting-item-box-bg-color: #fff;
// 更多按钮文本色
$--table-setting-item-text-color: #606266;
// 更多按钮悬浮色
$--table-setting-item-hover-color: #dedede;

.table-setting-item-box {
    padding: 10px 0;
    background: #{$--table-setting-item-box-bg-color};
    color: #{$--table-setting-item-text-color};
    .hr {
        border-top: 1px solid #e3e3e3;
        margin: 10px 0;
    }
    .item {
        height: 26px;
        line-height: 26px;
        cursor: pointer;
        position: relative;
        &.is-active {
            color: var(--el-color-primary);
        }
        .action-icon {
            position: absolute;
            right: 10px;
            top: 4px;
            display: none;
            .icon-span {
                cursor: pointer;
                display: inline-block;
                color: #{$--table-setting-item-text-color};
                &:hover {
                    color: #666;
                }
                &.edit-icon {
                    position: relative;
                    top: -2px;
                }
            }
        }
        &:hover {
            background: #{$--table-setting-item-hover-color};
            .action-icon {
                display: block;
            }
        }
        &.div-disabled {
            background: #{$--table-setting-item-box-bg-color};
            cursor: default;
        }
    }
}

/* 
*  实体列表详情  -------------------- 3.2 --------------------
* 
*/
// 实体列表详情背景颜色
$--table-detail-bg-color: #fff;
// 实体列表详情头部背景颜色
$--table-detail-header-bg-color: var(--el-color-primary);
// 实体列表详情主体背景颜色
$--table-detail-body-bg-color: #fff;


.ml-drawer {
    background: #{$--table-detail-bg-color};
	* {
		box-sizing: border-box;
	}
	.el-drawer__header {
		padding: 0;
		margin-bottom: 0;
	}
    .el-drawer__header {
        background: #{$--table-detail-header-bg-color};
    }
    .el-drawer__body {
        background: #{$--table-detail-body-bg-color};
    }
}

/* 
*  高级搜索样式  -------------------- 3.3 --------------------
* 
*/
// 高级搜索背景颜色
$--advFilter-bg-color: #fff;

.dropdown-menu-advFilter {
    background: #{$--advFilter-bg-color};
}



/**
* 
*  实体列表相关样式  -------------------- end --------------------
* 
*/


/**
* 
*  弹框样式  -------------------- begin --------------------
* 
*/

// 弹框头部背景颜色
$--dialog-header-bg-color: var(--el-color-primary);
// 弹框Body背景颜色
$--dialog-body-bg-color: #fff;
// 弹框底部背景颜色
$--dialog-footer-bg-color: #fff;

.ml-dialog {
    padding: 0;
	.el-dialog__header {
		padding: 0;
		margin: 0;
		background-color: #{$--dialog-header-bg-color};
		height: 60px;
		line-height: 60px;
		box-sizing: border-box;
		padding: 0 20px;
		box-sizing: border-box;
        text-align: left;
		.my-title {
			font-size: 20px;
			// color: var(--el-color-primary);
            color: #fff;
		}
		.close-icon {
			position: relative;
			top: 6px;
			cursor: pointer;
			// color: var(--el-color-primary);
            color: #fff;
			&:hover {
				color: var(--el-color-primary-dark-3);
			}
		}
		.full-screen-icon {
			position: relative;
			top: 6px;
			margin-right: 10px;
			cursor: pointer;
			color: #fff;
			&:hover {
				color: #fafafa;
			}
		}
	}
    .ml-dialog-body {
        height: 100%;
        padding: 20px 20px 15px 20px;
        background: #{$--dialog-body-bg-color};
        overflow: auto;
    }
	.el-dialog__footer {
		padding: 0;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		height: 51px;
		line-height: 50px;
		padding-right: 20px;
        background: #{$--dialog-footer-bg-color};
	}
    &.body-no-padding {
        .ml-dialog-body {
			padding: 0;
		}
    }
	&.not-header {
		.el-dialog__header {
			height: 0;
		}
		.el-dialog__body {
			padding-top: 50px;
		}
	}
	&.isFullScreen {
		height: 100vh;
		margin-bottom: 0;
        .el-dialog__body {
            height: calc(100% - 60px);
            
        }
        &.has-footer {
            .el-dialog__body {
                height: calc(100% - 120px);
            }
        }
        .ml-dialog-body {
            max-height: none !important;
        }
		.el-dialog__body {
			.fullScreen-man {
                max-height: none !important;
                height: 100% !important;
			}
		}
	}
	div {
		box-sizing: border-box;
	}
}

/**
* 
*  弹框样式  -------------------- end --------------------
* 
*/

/**
* 
*  仪表盘样式  -------------------- begin --------------------
* 
*/

// 仪表盘背景颜色
$--dashboard-bg-color: #fff;
// 每个容器背景颜色
$--dashboard-container-bg-color: #fff;

.adminui-main {
    .dashboard {
        background: #{$--dashboard-bg-color};
        .widget-body__content {
            background: initial;
        }
    }
}
